<template>
  <div style="overflow-y: scroll; flex-grow: 1; position: fixed; left: 50px; bottom: 0; height: calc(100% - 220px);">
    <el-calendar v-model="today">
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(2).join('-') }}
          <span v-if="data.isSelected" style="text-align: center"> {{ changeDate() }} </span>
        </p>
      </template>
    </el-calendar>
    <el-descriptions
      :column="2"
      :colon="false"
      :title="almanac.gzYear + '年  ' + almanac.animal + '          ' + almanac.gzMonth + '月  ' + almanac.gzDate + '日'"
      class="margin-top"
      direction="vertical">
      <el-descriptions-item
        :content-style="{'text-align': 'left'}"
        label="">
        {{ almanac.lmonth + '月' + almanac.ldate + "        " + almanac.term }}
      </el-descriptions-item>
      <el-descriptions-item :content-style="{'text-align': 'center'}"/>
      <el-descriptions-item
        :label-style="{'text-align': 'center'}"
        :content-style="{'text-align': 'center'}"
        label="宜">
        <span v-if="almanac.suit">{{ almanac.suit.split('.').join("\t") }}</span>
      </el-descriptions-item>
      <el-descriptions-item
        :label-style="{'text-align': 'center'}"
        :content-style="{'text-align': 'center'}"
        label="忌">
        <span v-if="almanac.avoid">{{ almanac.avoid.split('.').join("\t") }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>

import almanacApi from '../../api/almanacApi'

export default {
  name: 'Almanac',
  data() {
    return {
      almanac: {},
      today: new Date()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.changeDate()
    },
    changeDate() {
      const params = {
        year: this.today.getFullYear(),
        month: this.today.getMonth() + 1,
        day: this.today.getDate()
      }
      console.log(params)
      almanacApi.getData(params).then(res => {
        this.almanac = res.data
      }).catch(res => {})
    }
  }
}
</script>

<style scoped>

</style>
